<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="HandheldFriendly" content="True">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <link rel="stylesheet" href="{{ url_for('static', filename='mobile/css/tp/base.css') }}">
    {% if user_agent == 1 %}
    <script type="text/javascript" src="{{ url_for('static', filename='vacation/js/JS2ObjCBridge.js') }}"></script>
    {% endif %}
    <title>{{ title }}</title>
    <style type="text/css">
        body {
            background-color: #ffffff;
            {% if category == "travel_time" %}
            padding: 0px 15px;
            {% endif %}
        }
        {% if category == "travel_time" %}
        section {
            border-left: 3px solid #f3eee5;
            padding-left: 15px;
            margin-left: 5px;
            margin-top: 30px;
            padding-top: 0px;
        }
        {% else %}
        section {
            border-bottom: 1px solid #C9C9C9;
            margin-bottom: 40px;
            padding-bottom: 10px;
        }
        {% endif %}
        section h1 {
            border-top: 1px solid #C9C9C9;
            border-bottom: 1px solid #C9C9C9;
            margin: 25px 0px 15px 0px;
            color: #5f5f5f;
            padding-top: 15px;
        }
        section h1 p {
            border: 2px solid #4abdcc;
            width: 80px;
            margin-bottom: 36px;
            margin-top: -36px;
        }
        section img {
            width: 100%;
            border-radius: 4px;
            margin: 5px 0px;
        }
        section p {
            margin: 5px 0px;
            color: #787878;
        }
        {% if category != "travel_time" %}
        section h2 {
            border-bottom: 1px dashed #C9C9C9;
            color: #484848;
            padding: 15px 0px;
        }
        {% else  %}
        section h2 {
            border-top: 1px solid #C9C9C9;
            color: #484848;
            padding: 15px 0px;
            background-color: #ffffff;
            margin-left: -20px;
            margin-bottom: -20px;
            text-align: center;
            margin-top: 0px;
        }
        section h2 p {
            border-bottom: 1px solid #C9C9C9;
            margin-top: 15px;
        }
        {% endif %}
        section table {
            border-collapse: separate;
            border-spacing: 1px;
            width: 100%;
            text-align: center;
            margin: 15px 0px;
            background-color: #717171;
            vertical-align:middle;
        }
        section tr {
            background-color: #ffffff;
            height: 30px;
            margin: auto;
            font-size: 14px;
        }
        section td,th {
            vertical-align: middle;
            color: #717171;
        }
        section h3 {
            background-color: #4abdcc;
            text-align: left;
            color: #ffffff;
            padding: 10px 20px;
            width: 50px;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            margin-left: -22px;
            margin-bottom: 20px;
            margin-top: -5px;
        }

        section h4 {
            text-align: left;
            color: #4c4c4c;
            margin: 20px 0px 0px 0px;
            font-weight: 900;
        }
        section ul {
            padding-top: 5px;
            margin-top: -5px;
            margin-left: -20px;
            padding-left: 20px;
            background-color: #ffffff;
            {% if category == "travel_time" %}
            padding-bottom: 20px;
            {% endif %}
        }
        section i {
            float: left;
        }
        .icon {
            background-image: url(/static/img/product_info_icon.png);
            display: inline-block;
            background-repeat: no-repeat;
            background-size: 16px 80px;
        }
        .icon-ring {
            background-position: -2px -18px;
            height: 13px;
            width: 13px;
            margin: -2px 0px 0px -22px;
        }
        .icon-info {
            background-position: 0px -48px;
            height: 18px;
            width: 100%;
            margin: 10px 0px 10px 0px;
        }
        section .remark {
            padding-top: 5px;
            margin-top: -5px;
            margin-left: -20px;
            padding-left: 20px;
            background-color: #ffffff;
            padding-bottom: 20px;
            color: #999999;
            font-size: 13px;
        }
        section .remark p {
            border-top: 1px solid #b5b5b5;
            color: #999999;
            font-size: 13px;
        }
    </style>
</head>
<body class="explain" data-user-agent="{{ user_agent }}" data-version="{{ app_version }}" style="padding-top: 10px;">
    <section class="explain-info">
        {{ md_content|safe }}
        {% if category == "travel_time" %}
        <div class="remark">
            <p>
                <i class="icon icon-info"></i>
                以上行程时间表仅供参考，行程顺序内容和游览时间可能会根据实际情况有所改变，不再另行通知，敬请谅解
            </p>
        </div>
        {% endif %}
    </section>
    <script src="{{ url_for('static', filename='mobile/js/zepto.min.js') }}"></script>
    <script src="{{ url_for('static', filename='mobile/js/zepto-touch.min.js') }}"></script>
    <script src="{{ url_for('static', filename='dashboard/js/markdown.js') }}"></script>
    <script type="text/javascript">
    {% if user_agent == 4 %}
    android.setTitle("{{ title }}");
    android.goBackApp(false);
    android.goBackURL('');
    android.showContactUs(false);
    {% endif %}
    {% if user_agent == 1 %}
    JS2ObjCBridge.call("setTitle", ["{{ title }}"]);
    JS2ObjCBridge.call("goBackApp", [false]);
    {% endif %}

    $("section").find("h1").append("<p></p>");
    $("section").find("h4").append("<i class='icon icon-ring'></i>");
    {% if category == 'travel_time' %}
    $("section").find("h2").append("<p></p>");
    {% endif %}
    </script>
</body>
</html>
